<template>
  <el-container>
    <el-header>
      <div class="flex">
        <div>项目管理</div>
        <div class="margin-left-sm">
          <el-button
            class="filter-item"
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="handleProjectCreate"
          >新增项目</el-button>
        </div>
      </div>
      <div class="flex end">
        <el-input
          v-model="queryList.SearchKey"
          placeholder="项目名称"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleFilter"
          />
        </el-input>
      </div>
    </el-header>
    <el-main class="bg-white main-full-height">
      <el-table
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="序号" type="index" :index="indexMethod" width="70px" align="center" />
        <el-table-column label="项目名称" prop="ProjectName" />
        <el-table-column label="项目编号" prop="ProjectCode" />
        <el-table-column label="负责人姓名" prop="MainPersonName" />
        <el-table-column label="预计费用" prop="AllFee" />
        <el-table-column label="创建人" prop="CreateUserName" />
        <el-table-column label="创建时间" prop="CreateTime" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div class="flex flex-center ">
              <el-tag
                v-if="scope.row.Status === 1"
                type="primary"
                size="mini"
                style="margin:0 2px;"
              >启动中
              </el-tag>
              <el-tag
                v-if="scope.row.Status === 2"
                type="warning"
                size="mini"
                style="margin:0 2px;"
              >进行中
              </el-tag>
              <el-tag
                v-if="scope.row.Status === 3"
                type="primary"
                size="mini"
                style="margin:0 2px;width:50px"
              >验收中
              </el-tag>
              <el-tag
                v-if="scope.row.Status === 4"
                type="warning"
                size="mini"
                style="margin:0 2px;width:50px"
              >已结束
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="100"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row, $index }">
            <el-button
              type="text"
              size="mini"
              @click="handleUpdate(row)"
            >编辑</el-button>
            <!-- <el-button
              size="mini"
              type="text"
              @click="handleDelete(row.Id, $index)"
            >删除</el-button> -->
          </template>
        </el-table-column>
        <template slot="empty">
          <HelpTips :page-name="'projectindex'" />
        </template>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        :current-page="queryList.PageIndex"
        :page-size="queryList.PageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="handleCurrentChange"
      />
    </el-footer>
    <AddProject
      ref="addprojectref"
      @savesuccess="sucesssproject"
    />
  </el-container>
</template>
<script>
import AddProject from './addproject'
import HelpTips from '@/views/components/common/helptips/help'
import {
  getProjectData,
  deleteProject
} from '@/api/project/project'
export default {
  // 组件注册
  components: { AddProject, HelpTips },
  data() {
    return {
      addIsShow: false,
      tableData: [],
      // 查询参数
      totalCount: 0,
      queryList: {
        PageIndex: 1,
        PageSize: 20,
        SearchKey: ''
      },
      helpList: [
        {
          Button: '创建项目',
          content: '您可以创建一个新的项目。'
        }
      ]
    }
  },
  created() {
    this.getProjectData()
  },
  methods: {
    indexMethod(index) {
      var pageIndex =
        this.queryList.PageIndex <= 1 ? 0 : this.queryList.PageIndex - 1
      return pageIndex * 20 + index + 1
    },
    // 新增修改项目成功回调
    sucesssproject() {
      this.getProjectData()
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
    },
    getProjectData() {
      getProjectData(this.queryList).then(res => {
        this.tableData = res.TableData
        this.totalCount = res.TotalItemCount
      })
    },
    handleProjectCreate() {
      this.$refs.addprojectref.addopen()
    },
    handleUpdate(row) {
      this.$nextTick(() => {
        this.$refs.addprojectref.editOpen(row)
      })
    },
    handleDelete(Id) {
      var _this = this
      this.$confirm('确认是否删除该数据?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteProject(Id).then(res => {
            this.$message({
              message: res.Msg,
              type: 'success',
              duration: 5 * 1000
            })
            this.$nextTick(() => {
              _this.getProjectData()
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleFilter() {
      this.queryList.PageIndex = 1
      this.getProjectData()
    },
    // 切换页面
    handleCurrentChange(index) {
      this.queryList.PageIndex = index
      this.getProjectData()
    }
  }
}
</script>
